<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="/venue/css/bootstrap.min.css" />
		<link rel="stylesheet" href="/venue/css/homePage.css" />
		<link rel="stylesheet" href="/venue/css/dynamic.css" />
	</head>
	<body>

	<div class="container  col-xl-12 " id="dy">
		<!-- pagehead navbar -->
		<div id="pageHead" class="">
			<!-- Brand/logo -->
			<div id="logoDiv" class="dropdown">
				<a class="navbar-brand  dropdown-toggle" data-toggle="dropdown"><span id="logoSpan">{{venue.nickname}}</span></a>
				<!--					  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
				<!--						  <span class="sr-only">Toggle Dropright</span>-->
				<!--					  </button>-->
				<div class="dropdown-menu">
					<a class="dropdown-item" href="homePage.html">首页</a>
					<a class="dropdown-item" href="dynamic.html">动态</a>
					<div class="dropdown-divider"></div>
					<a class="dropdown-item" href="#">退出</a>
				</div>
			</div>


			<!-- Links -->
			<div id="linksDiv">
				<ul class="nav nav-tabs nav-justified justify-content-end">
					<li class="nav-item">
						<a class="nav-link" href="searchCoach.html">查看教练</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="searchVenue.html">查看场馆</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="followed.html">关注</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="message.html">通知</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="myCenter.html">场馆中心</a>
					</li>
				</ul>
			</div>

		</div>
		<!-- navbar end -->

		<!-- 分隔间距 -->
		<div id="separate"></div>
		<!--			<div id="editMine">-->
		<!--				我也来发个朋友圈-->
		<!--			</div>-->
		<!-- 按钮：用于打开模态框 -->
		<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#myModal">
			我也来发个朋友圈
		</button>

		<!-- 模态框 -->
		<div class="modal fade" id="myModal">
			<div class="modal-dialog">
				<div class="modal-content">

					<!-- 模态框头部 -->
					<div class="modal-header">
						<h4 class="modal-title">编辑你的动态</h4>
						<button type="button" class="close" data-dismiss="modal">&times;</button>
					</div>

					<!-- 模态框主体 -->
					<div class="modal-body form-group">
						<p>上传一张图片吧</p>
						<input  @change="showImage($event)" type="file" >
						<img width="130px" height="130px" src="images/default.png">
						<p></p>
						<label for="comment">正文</label>
						<textarea v-model="content" class="form-control" rows="5" id="comment"></textarea>
					</div>

					<!-- 模态框底部 -->
					<div class="modal-footer">
						<button type="button" @click="post" class="btn btn-secondary" data-dismiss="modal">发布</button>
					</div>

				</div>
			</div>
		</div>
		<!--模态框 end-->

		<div id="dynamicDiv">

			<div v-for="dynamic in dynamics" class="dy_item">
				<div class="avatar_div">
					<img class="avatar_img" :src="dynamic.avatar">
				</div>
				<div class="main_div">
					<div class="nickname_div">
						{{dynamic.nickname}}
					</div>
					<div class="content_div">
						{{dynamic.content}}
					</div>
					<div class="image_div">
						<img width="130px" height="130px" :src="dynamic.image">
					</div>
					<span class="timeStamp">{{dynamic.sendTime}}</span><br>
					<div class="message_div">
						<div class="msg">
							<span style="color:royalblue">mike:</span><span>真不错</span>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>

	</body>
	<script src="/venue/js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="/venue/js/axios.js" type="text/javascript" charset="utf-8"></script>
	<script src="/venue/js/axios_interceptor.js" type="text/javascript" charset="UTF-8"></script>
	<script src="/venue/js/jquery.min.js"></script>
	<script src="/venue/js/popper.min.js"></script>
	<script src="/venue/js/bootstrap.min.js"></script>
	<script src="/venue/js/dynamic.js"></script>
</html>
